<!--
[{id: '', goodsId: '', name: ''}]
-->
<template>
  <el-dialog
    title="选择商品"
    :visible.sync="showGoodsPop"
    class="el-dialog-edit"
    :close-on-click-modal="false"
  >
    <el-form label-position="left" label-width="100px" style="width: 100%; padding-left: 20px;">
      <el-form-item label="所选商品：" v-if="count !== 1">
        <div class="el-tag-box">
          <el-tag
            v-for="(goods, index) of goodsCheck"
            :key="goods.id"
            :closable="true"
            @close="delGoods(index)"
          >{{goods.name}}</el-tag>
        </div>
      </el-form-item>
    </el-form>
    <el-form
      ref="searchForm"
      class="search-block"
      :model="listQuery"
      label-position="left"
      label-width="100px"
      style="width: 100%"
    >
      <input type="text" style="display: none" />
      <!--form input placeholder-->
      <el-row :gutter="50">
        <el-col :xs="24">
          <el-form-item label="商品名称：" prop="name">
            <el-input
              @keyup.enter.native="search"
              v-model="listQuery.name"
              placeholder="按商品名称搜索"
              maxlength="50"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label class="btn-item">
        <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      @row-click="clickRow"
    >
      <el-table-column align="center" width="50">
        <template slot-scope="scope">
          <label class="input-radio" v-if="count === 1">
            <input
              type="radio"
              v-if="skuFlag"
              :value="{id: scope.row.id, goodsId: scope.row.goodsId, name: scope.row.name, image: scope.row.image, price: scope.row.price}"
              v-model="goodsRadio"
            />
            <input
              type="radio"
              v-else
              :value="{id: scope.row.goodsId, name: scope.row.name}"
              v-model="goodsRadio"
            />
            <span></span>
          </label>
          <label class="input-checkbox" v-else>
            <input
              type="checkbox"
              v-if="skuFlag"
              :value="{id: scope.row.goodsId, name: scope.row.name}"
              v-model="goodsCheck"
            />
            <input
              type="checkbox"
              v-else
              :value="{id: scope.row.id, goodsId: scope.row.goodsId, name: scope.row.name}"
              v-model="goodsCheck"
            />
            <span></span>
          </label>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称" min-width="110">
        <template slot-scope="scope">
          <div class="text-justify">
            <p v-text="scope.row.name"></p>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="虚拟商品" min-width="110" v-if="!goodsType">
        <template slot-scope="scope">
          <div class="text-justify">
            <span v-if="scope.row.goodsType===2" style="color: red">是</span>
            <span v-else>否</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="款号" width="110">
        <template slot-scope="scope">
          <span>{{scope.row.serialNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分类">
        <template slot-scope="scope">
          <span>{{scope.row.categoryName}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.pageIndex"
      :page-size="listQuery.pageSize"
      background
      layout="total, prev, pager, next, jumper"
      style="text-align: center"
      :total="listTotal"
    ></el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnDisabled" @click="chooseGoods">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "chooseGoods",
  props: {
    check: {
      type: Array,
      default() {
        return [];
      }
    },
    count: {
      type: Number,
      default: -1
    },
    skuFlag: {
      type: Boolean,
      default: false
    },
    goodsType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        name: "",
        goodsType: this.goodsType,
        pageIndex: 1,
        pageSize: 8
      },
      showGoodsPop: true,
      goodsCheck: this.check,
      goodsRadio: {},
      listTotal: 0,
      listLoading: false,
      btnDisabled: false,
      goodsDetail: {}
    };
  },
  created() {
    this.getList();
    console.log();
    if (this.count === 1 && this.check.length > 0) {
      this.goodsRadio = this.check[0];
    }
  },
  methods: {
    // 获取列表
    getList() {
      this.listLoading = true;
      this.request({
        url: "/bsnl-product/goods/query",
        method: "post",
        data: this.listQuery
      })
        .then(({ data, totalCount }) => {
          this.list = data;
          this.listTotal = totalCount;
          this.listLoading = false;
        })
        .catch(err => {
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
    },
    // 单击行
    clickRow({ id, goodsId, name }) {
      if (this.count === 1) {
        if (this.skuFlag) {
          this.goodsRadio = {
            id,
            goodsId,
            name
          };
        } else {
          this.goodsRadio = {
            id: goodsId,
            name
          };
        }

        return false;
      }
      let index = this.skuFlag
        ? this.goodsCheck.findIndex(item => item.id === goodsId)
        : this.goodsCheck.findIndex(item => item.goodsId === goodsId);
      if (index < 0) {
        if (this.skuFlag) {
          this.goodsCheck.push({
            id: goodsId,
            name
          });
        } else {
          this.goodsCheck.push({
            id,
            goodsId,
            name
          });
        }
      } else {
        this.goodsCheck.splice(index, 1);
      }
    },
    // 通过tag删除
    delGoods(index) {
      this.goodsCheck.splice(index, 1);
    },
    // 选择商品
    chooseGoods() {
      if (this.count === 1) {
        this.goodsCheck = [this.goodsRadio];
      }

      if (
        this.goodsCheck.length === 1 &&
        !this.goodsCheck[0].id &&
        !this.goodsCheck[0].name
      ) {
        return this.$message.error("请选择商品");
      }
      if (this.goodsCheck.length < 1) {
        return this.$message.error("请选择商品");
      }
      if (this.count > 0 && this.goodsCheck.length > this.count) {
        return this.$message.error(`最多选择${this.count}个商品`);
      }
      this.$emit("choose", this.goodsCheck);
      this.close();
    },
    // 关闭弹窗
    close() {
      this.showGoodsPop = false;
      document.body.removeChild(this.$el);
    },
    // 搜索
    search() {
      this.listQuery.pageIndex = 1;
      this.getList();
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageIndex = page;
      this.getList();
    }
  }
};
</script>
